<template>
	<div class="server_group">
		<Button style="margin: 10px 0;" type="primary" @click="newModel=true">创建新分组</Button>
		<Modal v-model="newModel" title="创建新分组" @on-ok="creatGroup" @on-cancel="cancel" class="newModel">
			<div class="group">
				名称：
				<Input v-model="newName" placeholder="请输入新分组名称" style="width: 200px" />
			</div>
			<div class="group">
				描述：
				<Input v-model="newDescription" type="textarea" placeholder="请输入新分组名称" style="width: 200px" />
			</div>
		</Modal>
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size="5" @on-change="handlePage" />
			</div>
		</div>
		<Modal v-model="editModel" title="创建新分组" @on-ok="editGroup" @on-cancel="cancel" class="newModel">
			<div class="group">
				名称：
				<Input v-model="editName" placeholder="请输入新分组名称" style="width: 200px" />
			</div>
			<div class="group">
				描述：
				<Input v-model="editDescription" type="textarea" placeholder="请输入新分组名称" style="width: 200px" />
			</div>
		</Modal>
		<Modal v-model="showModel" title="分组详情" @on-cancel="cancel" footer-hide>
			<div class="myBox">
				<div class="left">分组名称：{{name}}</div>
				<div class="right">创建时间：{{time}}</div>
				<div class="left">分组密钥：{{psd}}</div>
			</div>
			<div class="recordBox" style="clear: both">
				<span>分组描述：</span>
				<textarea class="texteara" readonly="" v-model="text" style="height: 100px;"></textarea>
			</div>
			<Button style="margin: 10px 0;" type="primary" @click="editPds">生成分组密钥</Button>
		</Modal>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '排序',
						key: 'gId'
					},
					{
						title: '分组名称',
						key: 'groupName'
					},
					{
						title: '分组描述',
						key: 'description'
					},
					{
						title: '创建时间',
						key: 'createTime',
						render: (h, params) => {
							return h('span', this.fommateTime(params.row.createTime))
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '5px'
									},
									on: {
										click: () => {
											this.editModel = true
											this.editName = params.row.groupName
											this.editDescription = params.row.description
											this.gId = params.row.gId
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '5px'
									},
									on: {
										click: () => {
											this.gId = params.row.gId
											this.showModel = true
											this.time = this.fommateTime(params.row.createTime)
											this.name = params.row.groupName
											this.text = params.row.description
											this.$api.get(0, '/sys/v2/keys?gId=' + params.row.gId, {}, data => {
												if (data.data.code === 0) {
													this.psd = data.data.data.priKey
												}
											})
										}
									}
								}, '详情')
							])
						}
					}
				],
				tableData: [],
				count: 0,
				page: 0,
				pageSize: 0,
				newModel: false,
				newName: '',
				newDescription: '',
				editModel: false,
				editName: '',
				editDescription: '',
				gId: 0,
				showModel: false,
				name: '',
				time: '',
				text: '',
				psd: ''
			}
		},
		methods: {
			// 获取服务器下拉列表
			getList () {
				this.$api.get(0, '/sys/v2/group/page?page=' + this.page + '&limit=5', {}, data => {
					if (data.data.code === 0) {
						this.tableData = data.data.data.data
						this.count = data.data.data.total
					}
				})
			},
			// 分页页码跳转
			handlePage (value) {
				this.page = value
				this.getList()
			},
			// 格式化时间
			fommateTime (date) {
				var time = new Date(date)
				var year = time.getFullYear()
				var month = this.num(time.getMonth() + 1)
				var day = this.num(time.getDate())
				var hour = this.num(time.getHours())
				var mine = this.num(time.getMinutes())
				return year + '-' + month + '-' + day + ' ' + hour + ':' + mine
			},
			// 小于10加0
			num (nume) {
				if (nume < 10) {
					return '0' + nume
				} else {
					return nume
				}
			},
			// 创建分组
			creatGroup () {
				if (this.newName === '') {
					this.$Message.warning('请输入服务器分组名称')
				} else {
					this.$api.post(0, '/sys/v2/group', {
						groupName: this.newName,
						description: this.newDescription
					}, data => {
						if (data.data.code === 0) {
							this.$Message.success('创建成功')
							this.getList()
						} else {
							this.$Message.error('创建失败')
						}
						this.cancel()
					})
				}
			},
			cancel () {
				this.editName = ''
				this.editDescription = ''
				this.newName = ''
				this.newDescription = ''
				this.gId = 0
			},
			// 修改服务器分组
			editGroup () {
				this.$api.put(0, '/sys/v2/group?_method=PUT', {
					groupName: this.editName,
					description: this.editDescription,
					gId: this.gId
				}, data => {
					console.log(data)
					if (data.data.code === 0 && data.data.data === true) {
						this.$Message.success('修改成功')
						this.getList()
					} else {
						this.$Message.error('修改失败')
					}
					this.cancel()
				})
			},
			editPds () {
				this.$api.post(0, '/sys/v2/group/key?gId=' + this.gId, {}, data => {
					console.log(data)
					if (data.data.code === 0) {
						this.psd = data.data.data
						this.$Message.success('修改成功')
					}
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>
